<template>
    <div class="quotes pb-108">
        <homeHeader />
        <date-picker @date-select="handleDateSelect" />
        <market-tabs
            v-model="active"
            :tabs="tabList"
            @change="handleTabChange"
        >
            <div class="tab-content">
                <!-- 每个 tab 的内容需要包裹在一个固定宽度的容器中 -->
                <div v-for="tabItem in tabList" :key="tabItem.id" class="tab-pane">
                    <!-- 原有的内容 -->
                </div>
            </div>
        </market-tabs>
        <Footer></Footer>
    </div>
</template>

<script>
import { Tab, Tabs } from 'vant'
import ListQuatation from "@/components/list-quotation";
import { _myCoins, _getHomeList } from '@/API/home.api'
import { mapGetters, mapActions } from "vuex";
import { SET_COIN_LIST } from '@/store/const.store'
import img1 from '@/assets/image/market/boeing.svg'
import img2 from '@/assets/image/market/general.svg'
import img3 from '@/assets/image/market/chevron.svg'
import img4 from '@/assets/image/market/bank.svg'
import img5 from '@/assets/image/market/intel.svg'
import img6 from '@/assets/image/market/microsoft.svg'
import img7 from '@/assets/image/market/eli.svg'
import img8 from '@/assets/image/market/apple.svg'
import homeHeader from '@/components/home/header.vue';
import HotList from '@/components/market/hot-list.vue';
import PlateInflow from '@/components/market/plate-inflow.vue';
import Plate from '@/components/market/plate.vue';
import PotentialShare from '@/components/market/potential-share.vue';
import HotImg from '@/components/market/hot-img.vue';
import RankingList from '@/components/market/ranking.vue';
import ArtificialIntelRanking from '@/components/market/artificial-intel-ranking.vue';
import ForeignHot from '@/components/market/foreign-hot.vue';
import Banner from '@/components/market/banner.vue';
import MarketTabs from '@/components/market/market-tabs.vue'
import DatePicker from '@/components/market/date-picker.vue'

export default {
    name: 'PageQoutes',
    components: {
        ListQuatation,
        homeHeader,
        HotList,
        PlateInflow,
        Plate,
        PotentialShare,
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        HotImg,
        RankingList,
        ArtificialIntelRanking,
        ForeignHot,
        Banner,
        MarketTabs,
        DatePicker
    },
    async created() {
        this.active = this.$route.query.active / 1
        if (this.userInfo.token) {
            const list = await _myCoins() // 获取我的自选
            this.myList = list.map(item => item.symbol) // 获取
        }
        // await this.fetchQoutes()
    },
    computed: {
        ...mapGetters({ coinList: 'home/coinList', userInfo: 'user/userInfo' }),
    },
    data() {
        const arr = []
        for (let i = 0; i < 10; i++) {
            arr.push({ id: i })
        }
        return {
            tabList: [
                { id: 1, text: this.$t('自选'), data: arr, loading: true },
                { id: 2, text: this.$t('加密货币'), data: arr, loading: true },
                { id: 3, text: this.$t('韩国股票'), data: arr, loading: true },
                { id: 4, text: this.$t('美国股票'), data: arr, loading: true },
                { id: 5, text: this.$t('外汇'), data: arr, loading: true },
                { id: 6, text: this.$t('日本股票'), data: arr, loading: true },
                { id: 7, text: this.$t('德国股票'), data: arr, loading: true },
            ],
            optionalList:[ // 自选列表
                    {
                        id:1,
                        name:this.$t('Boeing'),
                        icon: img1,
                        checked: false,
                    },
                    {
                      id:2,
                      name:this.$t('General Electric'),
                      icon: img2,
                      checked: false,
                    },
                    {
                      id:3,
                      name:this.$t('Chevron'),
                      icon: img3,
                      checked: false,
                    },
                    {
                      id:4,
                      name:this.$t('Bank of America'),
                      icon: img4,
                      checked: false,
                    },
                    {
                      id:5,
                      name:this.$t('Intel'),
                      icon: img5,
                      checked: false,
                    },
                    {
                      id:6,
                      name:this.$t('Microsoft'),
                      icon: img6,
                      checked: false,
                    },
                    {
                      id:7,
                      name:this.$t('Eli Lilly'),
                      icon: img7,
                      checked: false,
                    },
                    {
                      id:8,
                      name:this.$t('Apple'),
                      icon: img8,
                      checked: false,
                    }
            ],
            cryptocurrencyList: [
                {
                    id: 1,
                    symbol: "BTC/USD",
                    price: "67,715",
                    change24h: 2.11,
                    favorite: false
                },
                {
                    id: 2,
                    symbol: "ETH/USD",
                    price: "3,915",
                    change24h: -1.25,
                    favorite: true
                },
                {
                    id: 3,
                    symbol: "BNB/USD",
                    price: "567.8",
                    change24h: 0.85,
                    favorite: false
                },
                {
                    id: 4,
                    symbol: "XRP/USD",
                    price: "0.6234",
                    change24h: -2.11,
                    favorite: false
                },
                {
                    id: 5,
                    symbol: "DOGE/USD",
                    price: "0.1523",
                    change24h: 1.45,
                    favorite: false
                }
            ],
            keywords: '', // 搜索关键字
            filterData: [],
            myList: [],
            active: 1,

            timeout: null,
            inputTimeout: null,
            duration: 1000,
            isAnimated: false,
            sortVal: 0,
            hotListData: [
                {
                    id: 1,
                    logo: require('@/assets/image/market/boeing.svg'),
                    name: 'Boeing',
                    code: '010130',
                    price: 514000,
                    change: 8.66
                },
                {
                    id: 2,
                    logo: require('@/assets/image/market/apple.svg'),
                    name: '고려아연',
                    code: '010130',
                    price: 514000,
                    change: 8.66
                },
                {
                    id: 3,
                    logo: require('@/assets/image/market/apple.svg'),
                    name: '고려아연',
                    code: '010130',
                    price: 514000,
                    change: 8.66
                },
                {
                    id: 4,
                    logo: require('@/assets/image/market/apple.svg'),
                    name: '고려아연',
                    code: '010130',
                    price: 514000,
                    change: 8.66
                },
                {
                    id: 5,
                    logo: require('@/assets/image/market/apple.svg'),
                    name: '고려아연',
                    code: '010130',
                    price: 514000,
                    change: 8.66
                },
            ],
            plateData: [ //行业板块净流入
                { name: '工业服务', value: 5.14 },
                { name: '加工制作业', value: 3.14 },
                { name: '配送服务', value: 3.14 },
                { name: '其他', value: 3.14 },
                { name: '电子科技', value: 3.14 },
                { name: '能源矿产', value: 3.14 },
                { name: '制造业', value: 3.14 },
                { name: '非能源矿业', value: 1.14 }
            ],
            plateGridData: [ // 行业板块数据
                { 
                    name: '电子科技', 
                    value: '764.623',
                    change: 2.36 
                },
                { 
                    name: '健康科技', 
                    value: '764.623',
                    change: 2.36 
                },
                { 
                    name: '耐用消费品', 
                    value: '764.623',
                    change: 2.36 
                },
                { 
                    name: '制造业', 
                    value: '764.623',
                    change: 2.36 
                },
                { 
                    name: '金融', 
                    value: '764.623',
                    change: 2.36 
                },
                { 
                    name: '加工制造业', 
                    value: '764.623',
                    change: 2.36 
                }
            ],
            potentialShareData: [ // 潜力股
                {
                    id: 1,
                    logo: require('@/assets/image/market/eli.svg'),
                    name: '롯데에너지머티리얼즈',
                    code: '020150',
                    change: 8.75,
                    color: 'green'
                },
                {
                    id: 2,
                    logo: require('@/assets/image/market/eli.svg'),
                    name: '롯데에너지머티리얼즈',
                    code: '020150',
                    change: -8.75,
                    color: 'red'
                },
                {
                    id: 3,
                    logo: require('@/assets/image/market/eli.svg'),
                    name: '롯데에너지머티리얼즈',
                    code: '020150',
                    change: 8.75,
                    color: 'green'
                },
                {
                    id: 4,
                    logo: require('@/assets/image/market/eli.svg'),
                    name: '롯데에너지머티리얼즈',
                    code: '020150',
                    change: -8.75,
                    color: 'black'
                },
                {
                    id: 5,
                    logo: require('@/assets/image/market/eli.svg'),
                    name: '롯데에너지머티리얼즈',
                    code: '020150',
                    change: 8.75,
                    color: 'green'
                },
                {
                    id: 6,
                    logo: require('@/assets/image/market/eli.svg'),
                    name: '롯데에너지머티리얼즈',
                    code: '020150',
                    change: -8.75,
                    color: 'black'
                },
                
            ],
            hotImgData: [
                {
                    id: 1,
                    name: 'BNBUSDT',
                    change: -0.24,
                    type: 'down'
                },
                {
                    id: 2,
                    name: 'BNBUSDT',
                    change: 0.65,
                    type: 'up'
                }
            ],
            rankingData: [
                {
                    id: 1,
                    logo: require('@/assets/image/market/microsoft.svg'),
                    name: 'Microsoft',
                    code: 'MSFT',
                    price: 63118.47,
                    change: 0.86,
                    klineData: {
                        values: [100, 120, 115, 130, 125, 135, 130, 140],
                        trend: 'up'
                    },

                },
                {
                    id: 2,
                    logo: require('@/assets/image/market/eli.svg'),
                    name: 'Eli Lilly',
                    code: 'LLY',
                    price: 63118.47,
                    change: 0.86,
                    klineData: {
                        values: [100, 120, 115, 130, 125, 135, 130, 140],
                        trend: 'up'
                    }
                },
                {
                    id: 3,
                    logo: require('@/assets/image/market/apple.svg'),
                    name: 'Apple',
                    code: 'AAPL',
                    price: 63118.47,
                    change: 0.86,
                    klineData: {
                        values: [100, 120, 115, 130, 125, 135, 130, 140],
                        trend: 'up'
                    }
                },
                {
                    id: 4,
                    logo: require('@/assets/image/market/eli.svg'),
                    name: 'Amazon',
                    code: 'AMZN',
                    price: 63118.47,
                    change: 0.86,
                    klineData: {
                        values: [100, 120, 115, 130, 125, 135, 130, 140],
                        trend: 'up'
                    }
                },
                {
                    id: 5,
                    logo: require('@/assets/image/market/eli.svg'),
                    name: 'Eli Lilly',
                    code: 'LLY',
                    price: 63118.47,
                    change: 0.86,
                    klineData: {
                        values: [100, 120, 115, 130, 125, 135, 130, 140],
                        trend: 'up'
                    }
                },
                {
                    id: 6,
                    logo: require('@/assets/image/market/eli.svg'),
                    name: 'Eli Lilly',
                    code: 'LLY',
                    price: 63118.47,
                    change: 0.86,
                    klineData: {
                        values: [100, 120, 115, 130, 125, 135, 130, 140],
                        trend: 'up'
                    }
                },
                {
                    id: 7,
                    logo: require('@/assets/image/market/eli.svg'),
                    name: 'Amazon',
                    code: 'AMZN',
                    price: 63118.47,
                    change: 0.86,
                    klineData: {
                        values: [100, 120, 115, 130, 125, 135, 130, 140],
                        trend: 'up'
                    }
                },
                {
                    id: 8,
                    logo: require('@/assets/image/market/microsoft.svg'),
                    name: 'Microsoft',
                    code: 'MSFT',
                    price: 63118.47,
                    change: 0.86,
                    klineData: {
                        values: [100, 120, 115, 130, 125, 135, 130, 140],
                        trend: 'up'
                    }
                },
                {
                    id: 9,
                    logo: require('@/assets/image/market/eli.svg'),
                    name: 'Eli Lilly',
                    code: 'LLY',
                    price: 63118.47,
                    change: 0.86,
                    klineData: {
                        values: [100, 120, 115, 130, 125, 135, 130, 140],
                        trend: 'up'
                    }
                }
            ],
            foreignHotData: [
                {
                    id: 1,
                    flag: require('@/assets/image/market/eli.svg'),
                    name: 'NZD/USD',
                    price: 58164.5,
                    change: -1.61,
                    klineData: {
                        values: [100, 95, 92, 88, 85, 82, 80],
                        trend: 'down'
                    }
                },
                {
                    id: 2,
                    flag: require('@/assets/image/market/eli.svg'),
                    name: 'USD/CAD',
                    price: 58164.5,
                    change: 0.30,
                    klineData: {
                        values: [100, 105, 108, 112, 115, 118, 120],
                        trend: 'up'
                    }
                },
                {
                    id: 3,
                    flag: require('@/assets/image/market/eli.svg'),
                    name: 'NZD/USD',
                    price: 58164.5,
                    change: -1.61,
                    klineData: {
                        values: [100, 95, 92, 88, 85, 82, 80],
                        trend: 'down'
                    }
                }
            ]
        }
    },
    methods: {
        ...mapActions('home', [SET_COIN_LIST]),
        listSort(val) {
            this.sortVal = val
        },
        back() {
            this.$router.go(-1)
        },
        onInput() { // 输入
            if (this.inputTimeout) {
                clearTimeout(this.inputTimeout)
                this.inputTimeout = null
            }
            this.inputTimeout = setTimeout(() => {
                this.getFilterData()
            }, 50)
        },
        beforeChange() {
            this.keywords = ''
            return true
        },
        startTimeout() {
            this.clearTimeout()
            this.fetchQoutes()
        },
        clearTimeout() {
            if (this.timeout) {
                clearTimeout(this.timeout)
                this.timeout = null
            }
        },
        toggleFavorite(item) {
            item.favorite = !item.favorite;
        },
        handleTabChange(tabId) {
            console.log('Tab changed:', tabId)
            this.active = tabId
        },
        handleDateSelect({ date, index }) {
            console.log('Selected date:', date, 'index:', index)
            // 处理日期选择事件
        }
    },
    async activated() {

    },
    deactivated() {
        this.clearTimeout()
    },
    beforeDestroy() {
        this.clearTimeout()
        if (this.inputTimeout) {
            clearTimeout(this.inputTimeout)
            this.inputTimeout = null
        }
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.isAnimated = true;
        })
    }
}

</script>
<style lang="scss" scoped>
.search-input {
    @include themify() {
        color: themed("text_color");
    }
}

.quotes {
    box-sizing: border-box;
    width: 100%;
    color: #fff;

    @include themify() {
        background: themed("main_background");
    }
}

.quotes ::v-deep .van-tabs__nav {
    @include themify() {
        background: themed("main_background");
    }
}
.quotes ::v-deep.van-search {
  @include themify() {
    background: themed("main_background");
  }

}
.quotes ::v-deep .van-search__content {
  @include themify() {
    background: themed("main_background");
    border: 1px solid  #212121;
    border-radius:  10px;
    overflow: hidden;
  }
}
.quotes ::v-deep .van-tab--active {
    @include themify() {
        color: themed("text_color");
    }
}
 .quotes ::v-deep .van-cell {
   @include themify() {
     background: themed("main_background");
     color: themed("text_color") !important;
   }
 }



.inputBoxbg {
    @include themify() {
        background: themed("tab_background");
    }
}
.optionalList {
  .item {
    border-color: #212121;
    ::v-deep .van-cell__value {
      .flex{
        color: #fff;
      }
    }
  }
}
.bg-white {
  background: #fff !important;
}

/* 加密货币列表样式 */
.list-box {
  .van-cell {
    /* 设置文字颜色为白色 */
    ::v-deep .van-cell__value {
      color: #fff;
    }

    /* 币种名称和价格文字 */
    .left, .mid {
      color: #fff;
    }

    /* 涨跌幅保持原有的红绿色 */
    .right {
      &.text-green {
        color: #2abc5a;
      }
      &.text-red {
        color: #c7697f;
      }
    }
    &:not(:last-child)::after {
        position: absolute;
        box-sizing: border-box;
        content: ' ';
        pointer-events: none;
        right: 0.5rem;
        bottom: 0;
        left: 0.5rem;
        border-bottom: 1px solid #212121;
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5)
      }
  
      /* 最后一个 van-cell 的下边线 */
      &:last-of-type::after {
        position: absolute;
        box-sizing: border-box;
        content: ' ';
        pointer-events: none;
        right: 0.5rem;
        bottom: 0;
        left: 0.5rem;
        border-bottom: 1px solid #212121;
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        display: block !important;
      }
    }
  }

</style>

<style lang="scss" scoped>
.tab-content {
  display: flex;
  width: 100%;
  
  .tab-pane {
    flex: none;
    width: 100%;
  }
}

/* 添加日期选择器主题样式 */
.date-picker {
  --date-picker-bg: v-bind('themed("main_background")');
  --date-text-color: #999;
  --date-active-color: #fff;
  --date-active-line-color: #fff;
}
</style>
